<template>
  <view class="article">
    <view class="hrader">
      <image
        src="../../../static/bback.png"
        class="goback"
        @click="gobackClick"
        mode=""
      />
      精选好文
    </view>
    <view class="content">
      <view
        class="list"
        v-for="(item, index) in Consumptionlist"
        :key="index"
        @click="jumpDetail(item.id)"
      >
        <image
          class="img"
          :src="$IMG_URL + item.cover_image"
          mode="aspectFill"
        />
        <view class="rig">
          <view class="txt">{{ item.title }}</view>
          <view class="time">{{ item.createtime | formatDate }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      noDat: false,
      token: "",
      page: 1, // 页码
      pageSize: 10, // 每页条数
      Consumptionlist: [],
      total: "",
      last_page: "",
    };
  },
  onLoad() {
    this.token = uni.getStorageSync("token");
    this.getMyBill();
  },
  onReachBottom() {
    if (this.total / 10 <= this.last_page && this.total > 10) {
      this.loadMore();
    }
  },
  methods: {  
    gobackClick() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 跳转详情
    jumpDetail(id) {
      uni.navigateTo({
        url: "./articleDetail?id=" + id,
      });
    },
    // 获取精选好文列表
    async getMyBill() {
      this.page = 1;
      const res = await this.$myRequest({
        url: "index/getEssay",
        method: "POST",
        data: {
          page: this.page, // 页码
          pageSize: this.pageSize, // 每页条数
          type: "",
        },
      });
      this.Consumptionlist = res.data.data.data;
      this.total = res.data.data.total;
      this.last_page = res.data.data.last_page;
      if (this.Consumptionlist.length == 0) {
        this.noDat = true;
      } else {
        this.noDat = false;
      }
    },
    // 获取精选好文下一页列表
    async loadMore() {
      const res = await this.$myRequest({
        url: "index/getEssay",
        method: "POST",
        data: {
          page: (this.page += 1), // 页码
          pageSize: this.pageSize, // 每页条数
          type: "",
        },
      });
      this.Consumptionlist = this.Consumptionlist.concat(res.data.data.data);
      this.total = res.data.data.total;
      this.last_page = res.data.data.last_page;
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  width: 750rpx;
  background-color: #f4f4f4;
}
.article {
  .hrader {
    width: 100%;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    position: relative;
    font-size: 36rpx;
    font-weight: 500;
    color: #333333;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    .goback {
      position: absolute;
      width: 22rpx;
      height: 34rpx;
      left: 28rpx;
    }
  }
  .content {
    min-height: calc(100vh - 108rpx);
    margin-top: 108rpx;
    background: #fff;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 30rpx;
    .list {
      width: 100%;
      min-height: 154rpx;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 28rpx 0;
      border-bottom: 1px solid #eee;
      .img {
        display: block;
        width: 180rpx;
        height: 154rpx;
        margin-right: 18rpx;
        border-radius: 8rpx;
      }
      .rig {
        flex: 1;
        height: 154rpx;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-between;
        .txt {
          font-size: 28rpx;
          font-weight: 400;
          color: #373737;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .time {
          font-size: 20rpx;
          font-weight: 400;
          color: #b7b7b7;
        }
      }
    }
    .list:last-child {
      border-bottom: none;
    }
  }
}
</style>
